<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
        定位：
        将指定元素摆放到网页中任意的位置
        定位属性：position
        属性可选值：
         static:默认值，没有开启定位
         relative 开启相对定位

*/

        .box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            top: 50px;
            left: 50px;
            /* top: 400px;
            left: 200px; */
            /* right: 0px;
            bottom: 0px; */
            z-index: 6;

        }

        /* 
            相对定位：
            设置position属性值为relative则开启相对定位
            需要设置定位的偏移量才能够起作用
            偏移量（相对于位置的移动像素）
             -top  right  bottom  left 四个方向上的偏移量 通常两个即可确定位置

              开启了相对定位偏移量是根据自己原来的位置决定
              相对定位没有脱离文档流  元素性质也不会有改变
              相对定位会元素的显示层级提高一层 原来的基础上
              多个元素都开启后开的在上一层

              偏移量可以设置负值 表示往指定方向的反方向移动 
              负值偏移可能会移出屏幕视线

              对于开启了定位的元素  可以设置显示的层级  z-index
        
        */

        .box2 {
            width: 100px;
            height: 100px;
            background-color: green;
            position: relative;
            left: -15px;
            top: -20px;
            z-index: 5;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>